<template>
  <div class="content">
    <!--    <div class="bulletTitle">单元{{ unit }}</div>-->
    <div class="main">
      <div class="left">
        <!--        <OverMapItem :data="errorCell"></OverMapItem>-->
        <div class="errorPic">
          <img src="../../../assets/images/home/errorPic.jpg" alt="" />
        </div>
      </div>
      <div class="right">
        <el-button :icon="CloseBold" class="floating-close-button" circle @click="closePopup" />
        <div class="buttonArea">
          <div
            v-for="index in 7"
            :key="index"
            :class="[{ active: index == changeIndex }, 'smallButton']"
            @click="btnClick(index)"
          >
            {{ showUnit(index) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
// import OverMapItem from './OverMapItem.vue'
import { CloseBold } from '@element-plus/icons-vue'
import { inject } from 'vue'
import { getOverviewMap } from '../../../api/common/home'
const sharedMessage = inject('sharedMessage')
const emit = defineEmits('closePopup')
const unit = ref('A')
const changeIndex = ref(1)
const errorCell = ref([])
function closePopup() {
  emit('closePopup')
}
function btnClick(i) {
  changeIndex.value = i
  switch (i) {
    case 1:
      unit.value = 'A'
      break
    case 2:
      unit.value = 'B'
      break
    case 3:
      unit.value = 'C'
      break
    case 4:
      unit.value = 'D'
      break
    case 5:
      unit.value = 'E'
      break
    case 6:
      unit.value = 'F'
      break
    case 7:
      unit.value = 'G'
      break
  }
  handleItem(i)
}
function showUnit(i) {
  switch (i) {
    case 1:
      return '单元A'
    case 2:
      return '单元B'
    case 3:
      return '单元C'
    case 4:
      return '单元D'
    case 5:
      return '单元E'
    case 6:
      return '单元F'
    case 7:
      return '单元G'
  }
}
//单个点击
function handleItem(unitId) {
  // unitId为单元id
  console.log(unitId)
  // type = sharedMessage.value 为数据类型id
  let type = sharedMessage.value
  console.log(type)
  errorCell.value = []
  const par = '2024-02-01-2-red.xlsx'
  getOverviewMap(par).then((res) => {
    if (res.code === 200) {
      let result = res.data.result

      if (type == 1) {
        errorCell.value = result['Broken collector tubes']
      } else if (type == 2) {
        errorCell.value = result['Broken external mirror']
      } else if (type == 3) {
        errorCell.value = result['Broken inner mirror']
      } else if (type == 4) {
        errorCell.value = result['Loss of vacuum']
      } else {
        errorCell.value = []
      }
    }
  })
}

onMounted(() => {
  btnClick(1)
})
</script>

<style scoped lang="scss">
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 0.2rem;
  background-color: #000;
  opacity: 0.98;
  align-items: center;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.bulletTitle {
  font-size: 0.16rem;
  height: 0.3rem;
  line-height: 0.3rem;
  color: #02d9ff;
}
.main {
  height: 100%;
  display: flex;
  justify-content: flex-start;
}
.left {
  margin: 0 auto;
}
.errorPic {
  height: 96%;
  img {
    //max-width: 100%;
    //height: auto;
    width: auto;
    max-height: 100%;
  }
}
.right {
  display: flex;
  flex-direction: column;
  font-size: 0.16rem;
  margin-left: 0.3rem;
}
.buttonArea {
  margin-top: 1rem;
}
.smallButton {
  width: 0.8rem;
  height: 0.3rem;
  line-height: 0.3rem;
  color: #02d9ff;
  cursor: pointer;
  border: 0.8px solid #02d9ff;
  margin-top: 0.2rem;
}
.active {
  background-image: linear-gradient(
    -180deg,
    rgba(5, 238, 255, 0.8) 0%,
    rgba(2, 217, 255, 0.15) 100%
  );
  border: 0 solid #02d9ff;
  color: #fff;
}
</style>
